{#include header/}
<h2>
    {#if pet == null}New {/if}Pet
</h2>

<form class="form-horizontal" method="post" action="{#if pet == null}addPet?ownerId={owner.id}{#else}editPet?ownerId={owner.id}&petId={pet.id}{/if}" enctype="multipart/form-data">
<div class="form-group has-feedback">
    <div class="form-group">
        <label class="col-sm-2 control-label">Owner</label>
        <div class="col-sm-10">
            <span>{owner.firstName ?: ''} {owner.lastName ?: ''}</span>
        </div>
    </div>
   
    <div class="form-group">
        <label class="col-sm-2 control-label">Name</label>
        <div class="col-sm-10">
            <div>
                <input class="form-control" type="text" id="name" name="name" value="{#if pet != null}{pet.name}{/if}" />
            </div>
            <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
        </div>
    </div>

    <div class="form-group">
        <label class="col-sm-2 control-label">Birth Date</label>
        <div class="col-sm-10">
            <div>
                <input class="form-control" type="text" placeholder="YYYY-MM-DD" title="Enter a date in this format: YYYY-MM-DD"
                    min="1997-01-01" max="2030-12-31" id="birthDate" name="birthDate" value="{#if pet != null}{pet.birthDate}{/if}"/>
            </div>
            <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
        </div>
    </div>
    
    <div class="form-group">
        <label class="col-sm-2 control-label">Type</label>
        <div class="col-sm-10">
            <select id="type" name="type">
                <option value="bird" id="bird">bird</option>
                <option value="cat" id="cat">cat</option>
                <option value="dog" id="dog">dog</option>
                <option value="hamster" id="hamster">hamster</option>
                <option value="lizard" id="lizard">lizard</option>
                <option value="snake" id="snake">snake</option>
            </select>
            <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
        </div>
    </div>

    {#if pet != null}<script>document.getElementById("{pet.type.name}").selected = "true";</script>{/if}

</div>
<div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
        <button class="btn btn-default" type="submit">{#if pet == null}Add{#else}Update{/if} Pet</button>
    </div>
</div>
</form>

{#include footer/}